<template>
  <div class="charge-container">
    <template>
      <el-table :data="vipList" border style="width: 100%">
        <el-table-column align="center" label="产品图片" width="130">
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="row.imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="productName" align="center" label="产品名称">
        </el-table-column>
        <el-table-column prop="description" align="center" label="产品描述">
        </el-table-column>
        <el-table-column prop="price" align="center" label="价格(元)">
        </el-table-column>
        <el-table-column prop="inventory" align="center" label="库存">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              @click="pre_order(row)"
              icon="iconfont icon-vip3"
              >充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import * as api from "../../../../api";
export default {
  methods: {
    pre_order(row) {
      // 获取产品id
      console.log(row);
    },
  },
  data() {
    return {
      vipList: [],
    };
  },
  created() {
    api.getVipListApi("20210827165510715").then((res) => {
      if (res.data.state) {
        //获取成功
        this.vipList = res.data.data;
      } else {
        this.$message.error("获取失败");
      }
    });
  },
};
</script>
<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
.el-button--primary {
  background-color: #05a000;
}
</style>
